<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="js/echarts.min.js"></script>
	<script src="js/jquery-3.4.0.min.js"></script>
</head>
<body>
  <div id="main" style="width: 600px; height: 400px;"></div>
  <script type="text/javascript">
    var myEchar = echarts.init(document.getElementById('main'));
    myEchar.showLoading();
    myUser = {"userId": 1}
    console.log(myUser);
    $.ajax({
      contentType: "application/json;charset=utf-8",
      type: "put",
      url: "http://localhost:8801/myUser/getEcharts",
      data: JSON.stringify(myUser),
      dataType: "json",
      success: function(res) {
        console.log(res);
        if (res) {
          myEchar.hideLoading()
          myEchar.setOption({
            title: {
              text: '系统用户分析',
              left: 'center'
            },
            tooltip: {
              trigger: "item"
            },
            legend: {
              orient: 'vertical',
              left: 'left'
            },
            series: [{
              type: 'pie',
              radius: '50%',
              data: res,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0 , 0, 0.5)'
                }
              }
            }]
          })
        }
      },
      error: function(errorMag) {
        alert("用户状态分析数据加载失败");
        myEchar/hideLoading();
      }
    })
  </script>
</body>
</html>